/**
* VUEshop
* ============================================================================
* * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
* 网站地址: http://www.vueshop.com.cn
* ----------------------------------------------------------------------------
* 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
* 不允许对程序代码以任何形式任何目的的再发布。
* ============================================================================
* $Author: 沈小白 2020-07-22 $
*/<template>
	<view>
		<!-- #ifndef MP -->
		<view class="container">
			<!-- #endif -->
			<!-- #ifdef MP -->
			<view class="head-user" :style="{height:navHeight+'px',background:bg}">
				<view class="text">用户中心</view>
			</view>
			<view class="container" :style="{marginTop:navHeight+'px'}">
				<!-- #endif -->
				<app-head :bg="bg"></app-head>
				<view class="head_re">
					<view class="top_1">
						<image class="bg_1" :src="bgImg" role="img"></image>
						<view class="r">
							<navigator @tap.stop="clickMenu" v-if="!notDo" class="l_1" data-type='login'
								data-url="/pages/user/message_notice/message_notice" role="navigation">
								<image :src="imgUrl+'user/s_2.png'" role="img"> </image>
								<view class="nuberi_1" v-if="newCount.count>0">{{newCount.count}}</view>
							</navigator>
							<navigator @tap.stop="clickMenu" data-type='login' class="l_1"
								data-url="/pages/user/userinfo/userinfo" role="navigation">
								<image :src="imgUrl+'user/s_1.png'" role="img"></image>
							</navigator>
						</view>
					</view>
					<view class="top_2 top_3">
						<view class="t_top_1">
							<view class="l_1 clearfix">
								<!-- 仅仅小程序 -->
								<!--#ifdef MP-->
								<view class="tx" data-url="/pages/user/get_user_info/get_user_info">
									<view class="b">
										<image v-if="hasLogin" mode="aspectFill" @tap.stop="clickMenu"
											data-url="/pages/user/userinfo/userinfo"
											:src="imageError?defaultImg:userInfo.head_pic?userInfo.head_pic:defaultImg"
											@error="onImageError()" role="img"></image>
										<image v-else :src="defaultImg" @tap.stop="clickMenu"
											data-url="/pages/user/get_user_info/get_user_info" mode="aspectFill">
										</image>
									</view>
								</view>
								<view class="tx_yan des_flex_2">
									<view v-if="hasLogin">
										<view class="bt over_hide">{{userInfo.nickname}}</view>
										<view class="b_j">注册会员</view>
									</view>
									<view v-else>
										<view @tap.stop="clickMenu" data-type='login'
											data-url="/pages/user/get_user_info/get_user_info" class="bt over_hide">请登录
										</view>
									</view>
								</view>
								<!-- #endif -->
								<!-- 仅仅h5和app -->
								<!-- #ifdef H5 ||APP-PLUS -->
								<view class="tx">
									<view class="b">
										<image v-if="hasLogin" mode="aspectFill" @tap.stop="clickMenu"
											data-url="/pages/user/userinfo/userinfo"
											:src="imageError?defaultImg:userInfo.head_pic?userInfo.head_pic:defaultImg"
											@error="onImageError()" role="img"></image>
										<image v-else :src="defaultImg" data-type='login' @tap.stop="clickMenu"
											data-url="/pages/user/login/login" mode="aspectFill"></image>
									</view>
								</view>
								<view class="tx_yan des_flex_2">
									<view v-if="hasLogin">
										<view class="bt over_hide">{{userInfo.nickname}}</view>
										<view class="b_j">注册会员</view>
									</view>
									<view v-else>
										<view @tap.stop="clickMenu" data-type='login' data-url="/pages/user/login/login"
											class="bt over_hide">请登录</view>

									</view>
								</view>
								<!-- #endif -->

								<view class="sign_in_1 des_flex_2">
									<navigator @tap.stop="clickMenu" class="sign_in" data-type="login"
										data-url="/pages/user/sign_in/sign_in" role="navigation">
										<image :src="imgUrl+'user/jf_1.png'" role="img"></image>
										签到赚积分
									</navigator>
								</view>
							</view>
						</view>
					</view>
					<view class="top_2">
						<view class="t_top_1">
							<view class="l_2 des_flex_4">
								<view @tap.stop='clickMenu' data-url="/pages/user/account/account" class="li">
									<view>{{hasLogin&&userInfo?userInfo.user_money:0}}</view>余额
								</view>
								<view @tap.stop="clickMenu" class="li" data-url="/pages/user/points_list/points_list">
									<view>{{hasLogin&&userInfo?userInfo.pay_points:0}}</view>
									积分
								</view>
								<view @tap.stop="clickMenu" class="li" data-type="login"
									data-url="/pages/user/coupon/coupon">
									<view>{{coupon_count?coupon_count:0}}</view>
									优惠券
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="head_r2">
					<view @tap.stop="clickMenu" class="h3 des_flex_4" data-url="/pages/user/order_list/order_list">
						我的订单
						<view class="r_ys des_flex_3">
							全部订单
							<image :src="imgUrl+'user/xr_3.png'" role="img"></image>
						</view>
					</view>
					<view class="ul des_flex_4">
						<navigator @tap.stop="clickMenu" class="li" data-url="/pages/user/order_list/order_list?type=1"
							role="navigation">
							<view class="img">
								<image :src="imgUrl+'user/q1.png'" role="img"></image>
								<view class="nuberi_2" v-if="hasLogin&&statistic.wait_pay_count!=0">
									{{statistic.wait_pay_count}}
								</view>
							</view>
							<view>待付款</view>
						</navigator>
						<navigator @tap.stop="clickMenu" class="li" data-url="/pages/user/order_list/order_list?type=2"
							role="navigation">
							<view class="img">
								<image :src="imgUrl+'user/ka.png'" role="img"></image>
								<view class="nuberi_2" v-if="hasLogin&&statistic.wait_send_count!=0">
									{{statistic.wait_send_count}}
								</view>
							</view>
							<view>待发货</view>
						</navigator>
						<navigator @tap.stop="clickMenu" class="li" data-url="/pages/user/order_list/order_list?type=3"
							role="navigation">
							<view class="img">
								<image :src="imgUrl+'user/q2.png'" role="img"></image>
								<view class="nuberi_2" v-if="hasLogin&&statistic.wait_receive_count!=0">
									{{statistic.wait_receive_count}}
								</view>
							</view>
							<view>待收货</view>
						</navigator>
						<navigator @tap.stop="clickMenu" class="li" data-type="login"
							data-url="/pages/user/comment/comment?status=0" role="navigation">
							<view class="img">
								<image :src="imgUrl+'user/q3.png'" role="img"></image>
								<view class="nuberi_2" v-if="hasLogin&&statistic.wait_comment_count!=0">
									{{statistic.wait_comment_count}}
								</view>
							</view>
							<view>待评价</view>
						</navigator>
						<navigator @tap.stop="clickMenu" class="li"
							data-url="/pages/user/return_goods_list/return_goods_list" role="navigation">
							<view class="img">
								<image :src="imgUrl+'user/q4.png'" role="img"></image>
								<view class="nuberi_2" v-if="hasLogin&&statistic.return_goods_count!=0">
									{{statistic.return_goods_count}}
								</view>
							</view>
							<view>退换/售后</view>
						</navigator>
					</view>
				</view>
				<view class="head_r2">
					<view class="h3 des_flex_4">必备功能</view>
					<view class="bibei_1 clearfix">
						<navigator @tap.stop="distributSee" class="a des_flex_3" role="navigation">
							<view class="img">
								<image :src="imgUrl+'user/ss_17.png'" role="img"></image>
								新手必看
							</view>
						</navigator>
						<!-- 授权管理h5和app 没有 -->
						<!-- #ifndef H5 || APP-PLUS -->
						<navigator @tap.stop="authorization" class="a des_flex_3" role="navigation">
							<view class="img">
								<image :src="imgUrl+'user/ss_18.png'" role="img"> </image> 授权管理
							</view>
						</navigator>
						<!-- #endif -->
						<block v-for="(item,index) in menu" :key="index">
							<navigator @tap.stop="clickMenu" class="a des_flex_3" data-type="login"
								:data-url="item.menu_url" role="navigation" v-if="item.is_show&&item.menu_id!=1">
								<view class="img">
									<image :src="getMenuIconUrl(item)" role="img"></image>
									{{item.menu_name}}
								</view>
							</navigator>
						</block>
						<!-- <navigator @tap.stop="clickMenu"class="a des_flex_3" data-type="login" data-url="/pages/user/comment/comment?status=1" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_1.png" role="img"></image>
							我的评价
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3"  data-url="/pages/team/team_order/team_order" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_3.png" role="img"></image>
							拼团订单
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3" data-type="login" data-url="/pages/distribut/poster/poster" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_4.png" role="img"></image>
							我的海报
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu"class="a des_flex_3"data-type="login"  data-url="/pages/distribut/index/index" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_5.png" role="img"></image>
							我的分销
						</view>
					</navigator>
					<navigator v-if="emporarily" @tap.stop="clickMenu" class="a des_flex_3" data-url="/pages/virtual/virtual_list/virtual_list" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_6.png" role="img"></image>
							虚拟订单
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3" data-url="/pages/goods/integralMall/integralMall" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_12.png" role="img"></image>
							积分商城
						</view>
					</navigator>
					<navigator  class="a des_flex_3" url="/pages/active/coupon_list/coupon_list"  role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_8.png" role="img"></image>
							领券中心
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3" data-type="login" data-url="/pages/user/visit_log/visit_log" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_9.png" role="img"></image>
							浏览记录
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3" data-type="login" data-url="/pages/user/address_list/address_list" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_10.png" role="img"></image>
							地址管理
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3" data-type="login" data-store="store" data-url="/pages/newjoin/join1/join1" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_11.png" role="img"></image>
							我要开店
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3" data-url="/pages/index/index/index" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/kd_1.png" role="img"></image>
							砍价订单
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" class="a des_flex_3" data-type="login" data-url="/pages/user/sign_in/sign_in" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/qd_1.png" role="img"></image>
							我的签到
						</view>
					</navigator>
					<navigator @tap.stop="clickMenu" data-url="/pages/index/webview/webview?doc_code=13" class="a des_flex_3" role="navigation">
						<view class="img">
							<image :src="imgUrl+'common/yesu-9.png'"/user/ss_17.png" role="img"></image>
							使用帮助
						</view>
					</navigator> -->
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	import config from "@/api/config.js";
	import appHead from "@/components/app-head/app-head";
	import common from "@/common/common.js";
	import {
		getUserCouponList,
		getOrderStatistic,
		getUserInfo,
		getMessage,
		getMenu
	} from "@/api/api.js";
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	const globalData = getApp().globalData //从app.vue获取用户信息
	export default {
		data() {
			return {
				hostUrl: config.host, //路径前缀
				imgUrl: config.imgUrl,
				userInfo: null,
				notDo: false, //暂时不做
				defaultImg: config.imgUrl + 'common/user68.jpg',
				bgImg: config.imgUrl + 'user/t_1.png',
				nickName: "", //用户名
				imageError: false, //图片404
				avatarUrl: "", //头像
				coupon_count: "", //可用优惠券数量
				emporarily: false, //暂时没有
				statistic: "", //订单统计概况
				newCount: "", //未读消息总数
				bg: "#ff3b3b",
				menuList: [ //menuee
					{
						img: config.imgUrl + '',
						url: '/pages/user/order_list/order_list',
						type: '订单列表'
					},
					{
						img: config.imgUrl + 'user/w2.png',
						url: '/pages/user/coupon/coupon',
						type: '优惠券'
					},
					{
						img: config.imgUrl + 'user/ss_4.png',
						url: '/pages/distribut/poster/poster',
						type: '海报',
						isShow: false,
					},
					{
						img: config.imgUrl + 'user/ss_5.png',
						url: '/pages/distribut/index/index',
						type: '我的分销'
					},
					{
						img: config.imgUrl + 'user/w5.png',
						url: '/pages/distribut/index/index',
						type: '虚拟订单',
						isShow: false,
					},
					{
						img: config.imgUrl + 'user/ss_3.png',
						url: '/pages/team/team_order/team_order',
						type: '拼团订单'
					},
					{
						img: config.imgUrl + 'user/w7.png',
						url: '/pages/team/team_order/team_order',
						type: '预约订单',
						isShow: false,
					},
					{
						img: config.imgUrl + 'user/w8.png',
						url: '/pages/team/team_order/team_order',
						type: '自提订单',
						isShow: false,
					},
					{
						img: config.imgUrl + 'user/ss_1.png',
						url: '/pages/user/comment/comment?status=1',
						type: '我的评价'
					},
					{
						img: config.imgUrl + 'user/ss_12.png',
						url: '/pages/goods/integralMall/integralMall',
						type: '积分兑换'
					},
					{
						img: config.imgUrl + 'user/qd_1.png',
						url: '/pages/user/sign_in/sign_in',
						type: '我的签到'
					},
					{
						img: config.imgUrl + 'user/w12.png',
						url: '/pages/active/coupon_list/coupon_list',
						type: '领券中心'
					},
					{
						img: config.imgUrl + 'user/w13.png',
						url: '/pages/user/collect_list/collect_list',
						type: '我的收藏'
					},
					{
						img: config.imgUrl + 'user/w14.png',
						url: '/pages/user/visit_log/visit_log',
						type: '我的足迹'
					},
					{
						img: config.imgUrl + 'user/w15.png',
						url: '/pages/user/message_notice/message_notice',
						type: '我的消息'
					},
					{
						img: config.imgUrl + 'user/ss_10.png',
						url: '/pages/user/address_list/address_list',
						type: '地址管理'
					},
					{
						img: config.imgUrl + 'user/w18.png',
						url: '/pages/user/address_list/address_list',
						type: '砍价订单',
						isShow: false,
					},
					{
						img: config.imgUrl + 'user/w19.png',
						url: '/pages/index/webview/webview?doc_code=13',
						type: '使用帮助'
					},
					{
						img: config.imgUrl + 'user/w20.png',
						url: '/pages/index/webview/webview?doc_code=13',
						type: '我的购物卡',
						isShow: false,
					},
				],
				menu: "", //列表
			};
		},
		components: {
			appHead
		},
		computed: mapState(['hasLogin', 'user', 'token', 'navHeight']),
		onLoad() {

			this.getMenu()
		},
		onShow() {
			let that = this;
			if (that.hasLogin) {
				that.getUser()
				that.userInfo = that.user
				let params = {
					type: 0, //可用优惠劵
					size: 12,
				}
				that.getUserCouponList(params)
				that.getOrderStatistic()
				/*消息总未读数*/
				let newData = {
					/*category 0通知消息,1活动消息,2物流,3私信*/
					category: "0,1,2"
				}
				that.getMessage(newData)
			}
		},
		methods: {
			...mapActions(['getUser']),
			/*用户未读信息总数*/
			getMessage(params) {
				getMessage(params).then(res => {
					this.newCount = res;
					console.log(res)
				})
			},
			getMenu() {
				getMenu().then(res => {
					if (res.length > 0) {
						this.menuList.forEach((item, index) => {
							if (res[index] && item.type == res[index].menu_name) {
								if (item.isShow == false) {
									res[index].is_show = item.isShow;
								}
								res[index].menu_img = item.img;
								res[index].menu_url = item.url;
								res[index].menu_type = item.type;
							}
						})
					}
					this.menu = res;
				})
			},
			/*用户可用优惠券数*/
			getUserCouponList(params) {
				getUserCouponList(params).then(res => {
					if (res) {
						this.coupon_count = res.records.length;
					}
				})
			},
			/*订单统计概况*/
			getOrderStatistic() {
				getOrderStatistic().then(res => {
					this.statistic = res;
				})
			},
			/*授权管理 不会再h5和app中出现*/
			authorization() {
				/*打开授权*/
				// #ifndef H5 || APP-PLUS
				uni.openSetting({
					success(res) {
						console.log(res.authSetting)
						if (res.authSetting["scope.userInfo"] == true) {
							uni.getSetting({
								success(res) {
									console.log(res.authSetting)
								}
							})
						} else {
							uni.showModal({
								title: '用户未授权',
								content: '如需正常使用小程序，请点击授权按钮。',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定')
									}
								}
							})
						}
					}
				});
				// #endif
			},
			/*新手必看*/
			distributSee() {
				uni.navigateTo({
					url: `/pages/index/webview/webview?type=system&doc_code=create_circle`
				})
			},
			clickMenu(e) { //跳转方法
				// console.log(e)
				let url = e.currentTarget.dataset.url;
				let login = e.currentTarget.dataset.type;
				let store = e.currentTarget.dataset.store;
				if (login) {
					// this.params.prom_type=6;
					if (this.hasLogin) {
						uni.navigateTo({
							url: url
						})
					} else {
						// console.log("跳转");
						common.islogin()
					}
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			/*图片404使用默认图片*/
			onImageError() {
				this.imageError = true;
			},
			getMenuIconUrl(item) {
				let img = item.menu_img || item.image_url;
				if (img && img.includes('/public/upload')) {
					img = process.uniEnv.BASE_API + img;
				}
				return img;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	/* #ifdef MP */
	.head-user {
		position: fixed;
		top: 0;
		z-index: 100;

		width: 100%;

		.text {
			color: #fff;
			font-size: 30rpx;
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;
		}
	}

	/* #endif */
	.clearfix:before,
	.clearfix:after {
		content: " ";
		display: table;
		line-height: 0;
	}

	.clearfix:after {
		clear: both;
	}

	.des_flex_1 {
		display: flex;
		justify-content: space-between;
	}

	.des_flex_2 {
		display: flex;
		align-items: center;
	}

	.des_flex_3 {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.des_flex_4 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.over_hide {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box !important;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		height: 36rpx;
	}

	/* 局部 */
	.container .head_re {
		position: relative;
	}

	.container .top_1 {
		position: relative;
		margin-bottom: 80rpx;
	}

	.container .top_1 .bg_1 {
		width: 750rpx;
		height: 340rpx;
	}

	.container .top_1 .r {
		position: absolute;
		top: 40rpx;
		right: 20rpx;
		text-align: right;
	}

	.sign_in_1 {
		position: absolute;
		top: 0;
		right: -20rpx;
		height: 120rpx;
		z-index: 99;
	}

	.sign_in {
		width: 190rpx;
		height: 54rpx;
		font-size: 22rpx;
		color: #fff;
		display: flex;
		align-items: center;
		border-radius: 27rpx 0 0 27rpx;
		background: linear-gradient(90deg, rgba(255, 204, 0, 1) 0%, rgba(255, 158, 61, 1) 100%);
		box-shadow: 0px 4rpx 10rpx 0px rgba(255, 106, 76, 0.4);
	}

	.sign_in image {
		width: 24rpx;
		height: 24rpx;
		margin-left: 25rpx;
		margin-right: 8rpx;
	}

	.container .top_1 .r .l_1 {
		width: 48rpx;
		height: 48rpx;
		display: inline-block;
		margin-left: 30rpx;
		position: relative;
	}

	.container .top_1 .r .l_1 image {
		width: 48rpx;
		height: 48rpx;
	}

	.container .top_2 {
		width: 710rpx;
		height: 160rpx;
		background: #fff;
		border-radius: 10rpx;
		position: absolute;
		top: 248rpx;
		left: 20rpx;
	}

	.container .top_3 {
		top: 88rpx;
		background: none;
	}

	.container .t_top_1 .l_1 {
		padding: 0 40rpx;
		height: auto;
		/* position: absolute;
	  top: -70rpx;
	  left: 0;
	  right: 0; */
		box-sizing: border-box;
		position: relative;
	}

	.container .t_top_1 .tx {
		position: relative;
		width: 120rpx;
		float: left;
	}

	.container .t_top_1 .b {
		width: 120rpx;
		height: 120rpx;
		border: 6rpx solid rgba(255, 255, 255, 1);
		box-shadow: 0px 4rpx 10rpx 0px rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		border-radius: 50%;
		position: relative;
		overflow: hidden;
		background: #f5f5f5;
	}

	.container .t_top_1 .tx image {
		width: 100%;
		height: 100%;
		/* object-fit: cover; */
	}

	.container .t_top_1 .tx_yan {
		float: left;
		height: 120rpx;
		width: 350rpx;
		margin-left: 30rpx;
	}

	.container .t_top_1 .b_j {
		width: auto;
		color: #fff;
		height: 36rpx;
		border-radius: 16rpx;
		font-size: 20rpx;
		text-align: center;
		line-height: 36rpx;
		padding: 0 12rpx;
		/* background:linear-gradient(90deg,rgba(255,106,76,1) 0%,rgba(255,153,51,1) 100%); */
		background: rgba(0, 0, 0, 0.1);
		box-shadow: 0px 4rpx 10rpx 0px rgba(255, 106, 76, 0.4);
		margin-top: 15rpx;
	}

	.container .t_top_1 .bt {
		font-size: 30rpx;
		color: #fff;
		height: auto;
		font-weight: bold;
	}

	.container .t_top_1 .qind_1 {
		float: right;
		margin-top: 106rpx;
		width: 100rpx;
		height: 54rpx;
		background: linear-gradient(90deg, rgba(255, 106, 76, 1) 0%, rgba(255, 153, 51, 1) 100%);
		box-shadow: 0px 4rpx 10rpx 0px rgba(255, 106, 76, 0.4);
		border-radius: 27rpx 27rpx 27rpx 0px;
		font-size: 22rpx;
		color: #FEFEFE;
		text-align: center;
		line-height: 54rpx;
	}

	.container .t_top_1 .qind_1 image {
		width: 24rpx;
		height: 24rpx;
		display: inline-block;
		position: relative;
		top: 5rpx;
	}

	.container .t_top_1 .l_2 {
		/* margin-top: 140rpx; */
		height: 160rpx
	}

	.container .t_top_1 .l_2 .li {
		font-size: 24rpx;
		color: #333;
		width: 33.333%;
		text-align: center;
		position: relative;
	}

	.container .t_top_1 .l_2 .li::before {
		content: '';
		position: absolute;
		top: 20rpx;
		right: 0;
		width: 1rpx;
		height: 40rpx;
		background: #f3f3f3;
	}

	.container .t_top_1 .l_2 .li:last-child::before {
		background: #fff;
	}

	.container .t_top_1 .l_2 .li view {
		color: #ff3b3b;
		font-size: 30rpx;
		margin-bottom: 10rpx;
		font-weight: bold;
	}

	.container .head_r2 {
		background: #fff;
		margin: 0 20rpx 20rpx 20rpx;
		position: relative;
		border-radius: 10rpx;
	}

	.container .head_r2:last-child {
		margin-bottom: 1rpx;
	}

	.container .head_r2 .h3 {
		font-size: 30rpx;
		color: #333;
		height: 80rpx;
		padding-right: 20rpx;
		position: relative;
		padding-left: 20rpx;
	}

	.container .head_r2 .h3::before {
		content: '';
		position: absolute;
		top: 26rpx;
		left: 0;
		width: 6rpx;
		height: 30rpx;
		background: rgba(255, 76, 76, 1);
	}

	.container .head_r2 .r_ys {
		font-size: 24rpx;
		color: #999;
	}

	.container .head_r2 image {
		width: 32rpx;
		height: 32rpx;
		display: block;
		position: relative;
	}

	.container .head_r2 .ul {
		/* margin: 0 20rpx; */
		height: 180rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #333;
		border-top: 1rpx solid #f3f3f3;
	}

	.container .des_flex_3 image {
		margin-left: 10rpx;
	}

	.container .head_r2 .ul .li {
		text-align: center;
		width: 20%;
		position: relative;
		height: 150rpx;
		padding-top: 30rpx;
		box-sizing: content-box;
	}

	.container .head_r2 .ul .li .img {
		position: relative;
		width: 56rpx;
		height: 56rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}

	.container .head_r2 .ul .li image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.container .head_r2 .bibei_1 {
		/* margin: 0 20rpx; */
		border-top: 1rpx solid #f3f3f3;
	}

	.container .head_r2 .bibei_1 .a {
		float: left;
		width: 25%;
		height: 160rpx;
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}

	.container .head_r2 .bibei_1 .a image {
		display: block;
		width: 72rpx;
		height: 72rpx;
		margin: 0 auto;
		margin-bottom: 10rpx;
	}

	.nuberi_1 {
		padding: 0 12rpx;
		height: 36rpx;
		line-height: 36rpx;
		color: #ff3b3b;
		font-size: 24rpx;
		position: absolute;
		top: -11rpx;
		right: -14rpx;
		background: #fff;
		border-radius: 36rpx;
	}

	.nuberi_2 {
		height: 36rpx;
		min-width: 36rpx;
		box-sizing: border-box;
		padding: 0 5rpx;
		line-height: 36rpx;
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		top: -11rpx;
		right: -14rpx;
		background: #ff3b3b;
		border-radius: 18rpx;
		box-shadow: 0px 4px 10px 0px rgba(255, 76, 76, 0.4);
	}

	.nuberi_3 {
		padding: 0 12rpx;
		height: 36rpx;
		line-height: 36rpx;
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		top: 22rpx;
		right: 76rpx;
		background: #ff3b3b;
		border-radius: 100%;
		box-shadow: 0px 4px 10px 0px rgba(255, 76, 76, 0.4);
	}
</style>
